<!--  -->
<template>
  <div class='headers'>
    <div>echarts柱形图的使用</div>
    <div id="myCharts" :style="{width: '100%', height: '300px'}"></div>
    <p> 1、安装echarts依赖
      # npm install echarts -S <br>
      2、使用的页面中引入<br>
      import * as echarts from 'echarts'
      <br>
      如图：
      <viewer>
        <img src="../../assets/3.png" alt="" width="100%">
        <img src="../../assets/4.png" alt="" width="100%">
        <img src="../../assets/5.png" alt="" width="100%">
      </viewer>

      这样就可以正常显示了
    </p>
    <div style="width:100%;height:60px"></div>
    <navs></navs>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import navs from './navs.vue';
  export default {
    components: {
      navs
    },
    name: '',
    data() {
      //这里存放数据
      return {

      };
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.drawLine();
    },
    //方法集合
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例

        let myChart = echarts.init(document.getElementById('myCharts'))
        // 绘制图表

        let option = {
          legend: {
            data: ['aa最低分', 'bb最低分', 'cc最低分']
          },
          xAxis: {
            type: 'category',
            data: ['700', '650', '622','617','615', '600', '550', '500', '450', '400', '350', '300', '250', '200', '150', '100'],
          },
          // tooltip: { //鼠标经过，提示
          //   trigger: 'axis',
          //   axisPointer: {
          //     type: 'cross'
          //   },
          //   padding: [5, 10]
          // },
          yAxis: {
            // type: 'value'
          },
          grid: { //组件离容器的距离
            left: '10px',
            right: '10px',
            // top:'10px',
            bottom: '10px',
            containLabel: true //否包含坐标轴的刻度标签
          },
          series: [

            {
              symbolSize: 10,
              data: [
                [2, 23751]
              ],
              itemStyle : { normal: {label : {show: true}}},
              name: "aa最低分",
              type: 'scatter',
              color: ['#ff0000'], //柱子颜色
              // smooth: true
            },
            {
              symbolSize: 10,
              data: [
                [3, 70135]
              ],
              itemStyle : { normal: {label : {show: true}}},
              name: "bb最低分",
              type: 'scatter',
              color: ['#40c9c6'], //柱子颜色
              // smooth: true
            },
            {
              symbolSize: 10,
              data: [
                [4, 134531]
              ],
              itemStyle : { normal: {label : {show: true}}},

              name: "cc最低分",
              type: 'scatter',
              color: ['#e69d87'], //柱子颜色
              // smooth: true
            },{
              symbol: 'none', //折线图去圆点
              data: [0, 3074, 23751, 70135, 134531, 201469, 253921, 290421, 315218, 330156, 336466, 337750, 337988],
              type: 'line',
              smooth: true
            }
          ]
        };
        myChart.setOption(option)
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //beforeCreate() {}, //生命周期 - 创建之前
    //beforeMount() {}, //生命周期 - 挂载之前
    //beforeUpdate() {}, //生命周期 - 更新之前
    //updated() {}, //生命周期 - 更新之后
    //beforeDestroy() {}, //生命周期 - 销毁之前
    //destroyed() {}, //生命周期 - 销毁完成
    //activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style lang='' scoped>
  /* @import url(); 引入公共css类 */

</style>
